<template>
  <view class="content">
    <view class="top" hover-class="none" hover-stop-propagation="false">
      <view @tap="goto(item)" class="notice" v-for="(item, index) in list" :key="index">
        <view
          style="display: flex; align-items: center; padding: 14rpx 16rpx; border-bottom: 2rpx solid rgba(0,0,0,0.1); font-size:28rpx;"
          class="" hover-class="none" hover-stop-propagation="false">
          <image style="width: 56rpx;height: 56rpx; border-radius: 50%; margin-right: 8rpx;" class=""
            src="https://ts3.cn.mm.bing.net/th?id=OIP-C.4SPZVrcvZ-Tunx4G4FFtRAAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
            mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="">
          </image>
          {{ item.payShopName }}
        </view>
        <view class="" style=" padding: 32rpx 40rpx;">
          <view class="" style="font-size: 32rpx; font-weight: 400;">
            扣费凭证
          </view>
          <view class=""
            style="display: flex; justify-content: center; width: 100%; align-items: center; margin-top: 20rpx;">
            <view class="" hover-class="none" hover-stop-propagation="false">
              ￥
            </view>
            <view class="" hover-class="none" hover-stop-propagation="false">
              <view class="" style="font-size: 24rpx; color: #999999; font-weight: 400;" hover-class="none"
                hover-stop-propagation="false">扣费金额</view>
              <view class="" style="font-size: 52rpx; color: #333333; font-weight: 500;" hover-class="none"
                hover-stop-propagation="false">{{ (item.payMoney) / 100 }}</view>
            </view>
          </view>
          <view class="" style="display: flex; align-items: center; margin-top: 44rpx;">
            <view class="" hover-class="none" hover-stop-propagation="false" style="font-size: 28rpx;color: #999999;">
              付款时间
            </view>
            <view class="" hover-class="none" hover-stop-propagation="false"
              style="font-size: 28rpx;color: #333333; margin-left: 20rpx;">
              {{ item.payTime }}
            </view>
          </view>
          <view class="" style="display: flex; align-items: center; margin: 16rpx 0 40rpx 0; ">
            <view class="" hover-class="none" hover-stop-propagation="false" style="font-size: 28rpx;color: #999999;">
              付款方式
            </view>
            <view class="" hover-class="none" hover-stop-propagation="false"
              style="font-size: 28rpx;color: #333333; margin-left: 20rpx;">
              {{ item.payTypeName }}
            </view>
          </view>
          <view class=""
            style="display: flex; align-items: center; justify-content: space-between; height: 30rpx; margin-top: 16rpx; padding-top:16rpx; border-top: 2rpx solid rgba(0,0,0,0.1);">
            <view class="" hover-class="none" hover-stop-propagation="false" style="font-size: 24rpx;color: #999999;">
              查看订单详情
            </view>
            <view class="" hover-class="none" hover-stop-propagation="false"
              style="font-size: 20rpx;color: #333333; margin-left: 20rpx;">
              <u-icon name="arrow-right" color="#666666" size="28"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
let that = null
import { queryUserMes } from '@/api/delivery'
export default {
  data() {
    return {
      list: [],
      pageNum: 1,
      pageSize: 5,
      pagesStatus: false,
    }
  },
  onReady() {
  },
  onShow() {
    this.getlist()
  },
  onLoad() {

  },
  methods: {
    getlist() {
      let obj = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      queryUserMes(obj).then(res => {
        console.log('消息列表', res)
        if (this.pageNum === 1) {
          this.list = res.data.messagelist

          console.log('物资配送列表数据', this.list)
        } else {
          this.list = this.list.concat(res.data.messagelist)
        }
        if (res.data.messagelist.length < 5) {
          this.pagesStatus = false
        } else {
          this.pagesStatus = true
        }
      })
    },
    goto(item) {
      if (item.orderType == 1) {
        uni.navigateTo({ url: "/pagesDelivery/deliveryPayEnd?orderNum=" + item.dataId })
      } else if (item.orderType == 4) {
        uni.navigateTo({ url: "/pagesMaintain/maintainOrders?orderNum=" + item.dataId })
      } else if (item.orderType == 3) {
        uni.navigateTo({ url: "/pagesAgriculture/agricultureWaitPay?orderNum=" + item.dataId })
      } else if (item.orderType == 2) {
        console.log('看看健康', item.orderType)
        uni.navigateTo({ url: "/pagesHealth/status?orderNum=" + item.dataId })
      }
    }
  },
  //评论页数增加
  onReachBottom() {
    console.log("触底");
    // 模拟的请求数据
    if (this.pagesStatus) {
      this.pageNum++
      this.getlist()
    }
  },
  onPullDownRefresh: function () {
    setTimeout(() => {
      this.pageNum = 1
      this.pagesStatus = false
      this.getlist()
      wx.stopPullDownRefresh()
    }, 2000)
  },



}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 100vh;
  background: #F5F5F5;
  padding: 30rpx 48rpx;

  .top {

    .notice {
      background: #FFFFFF;
      box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.05);
      border-radius: 8rpx;
      cursor: pointer;
      margin-bottom: 30rpx;

    }
  }

}
</style>